<template>
  <div class="aside-bar-container">
    <div class="aside-bar-header"></div>
      <div @click="jumpPage('/')" :class="{'on': true}" class="menu">
        <el-icon size="20px" color="#fff">
          <Edit />
        </el-icon>
        <span class="text">概述</span>
      </div>
      <div @click="jumpPage('/atlas')" class="menu">
        <el-icon size="20px" color="#fff">
          <PictureFilled />
        </el-icon>
        <span class="text">图库</span>
      </div>
  </div>
</template>
  
<script lang="ts" setup>
import { useRouter } from "vue-router";

const router = useRouter();

// 页面跳转
const jumpPage = (url: string) => {
  router.push(url);
}
</script>
  
<style lang="less" scoped>
.aside-bar-container {
  width: 100%;
  .aside-bar-header {
    width: 100%;
    height: 50px;
    background-color: #1e2532;
    margin-bottom: 50px;
  }
  .menu {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 30px;
    .text {
      color: #fff;
      margin-left: 3px;
    }
  }
  .on {
    background-color: #1e2532;
  }
}
</style>